'use client';

import { Stack } from '@mui/material';
import FilterSection from './FilterSection';
import { useActions, useClientParams, useGlobalState } from '@/hooks';
import { useEffect, useRef, useState } from 'react';
import {
  filtersToSearchParams,
  searchParamsToFilters,
  staticGo,
} from '@/utils/common';
import FilterCategories from './FilterCategories';
import FilterPrice from './FilterPrice';
import CompareList from '../CompareListSection/CompareList';
import './FiltersMod.scss';

const FiltersMod = ({
  paths,
  basePath,
  isLogin,
  isShowFilter,
  onCloseFilter,
}: {
  paths: string[];
  basePath: string;
  isLogin: boolean;
  isShowFilter: boolean;
  onCloseFilter: Fn;
}) => {
  const {
    basePath: c_basePath,
    pathname,
    searchParams,
    filterObject,
  } = useClientParams();

  const currentParams = Object.fromEntries(searchParams);
  const baseFilters = searchParamsToFilters(currentParams);
  const [allFilters, setAllFilters] = useState(baseFilters);
  const mobileHerderRef = useRef<any>(null);

  useEffect(() => {
    setAllFilters(filterObject);
  }, [filterObject]);

  // const checkIsMobile = () => {
  //   if (mobileHerderRef.current) {
  //     const displayStyle = window.getComputedStyle(
  //       mobileHerderRef.current
  //     ).display;
  //     if (displayStyle != 'none') return true;
  //   }
  //   return false;
  // };

  const handleFilterChange = (action: string, data: Obj) => {
    const newParams: Obj = filtersToSearchParams(allFilters);
    // console.log(action, data, newParams);
    if (action == 'add') {
      newParams[data.datakey] = data.value;
    } else if (action == 'del') {
      delete newParams[data.datakey];
    }
    staticGo(pathname, newParams);
    onCloseFilter && onCloseFilter();
  };

  const handleCloseFilter = () => {
    onCloseFilter && onCloseFilter();
  };
  const handleClearFilter = () => {
    staticGo(pathname, {});
    onCloseFilter && onCloseFilter();
  };

  return (
    <div
      className={'content-sidebar-wrapper ' + (isShowFilter && 'panel-show')}
    >
      <div className="content-sidebar-mobile-header" ref={mobileHerderRef}>
        <div className="content-sidebar-mobile-header-title">
          <button
            className="content-sidebar-mobile-header-close"
            onClick={handleCloseFilter}
          >
            <span className="iconfont icon-close"></span>
          </button>
          <span>Filters</span>
        </div>
        <button
          className="content-sidebar-mobile-header-clear"
          onClick={handleClearFilter}
        >
          Clear all
        </button>
      </div>
      <div className="content-sidebar-contents">
        <div className="content-sidebar-filters">
          {/* {isLogin && ( */}
          <FilterCategories
            basePath={basePath}
            paths={paths}
            onChange={handleCloseFilter}
            isLogin={isLogin}
          />
          {/* )} */}
          {c_basePath == 'new-arrivals' && (
            <FilterSection
              title={'Recently Added'}
              data={
                isLogin && [
                  {
                    datakey: 'recently',
                    title: 'Last 7 days',
                    value: 7,
                    type: 'number',
                  },
                  {
                    datakey: 'recently',
                    title: 'Last 14 days',
                    value: 14,
                    type: 'number',
                  },
                ]
              }
              type="radio"
              basePath={basePath}
              onChange={handleFilterChange}
              filtersData={allFilters}
              loginTipsVisible={!isLogin}
              defaultCollapse={true}
            />
          )}
          <FilterSection
            title={'Shipping'}
            data={
              isLogin && [
                {
                  title: 'Free AU Shipping',
                  datakey: 'au_free_shipping',
                  type: 'boolean',
                  value: true,
                },
                {
                  title: 'NZ Shipping Available',
                  datakey: 'nz_available',
                  type: 'boolean',
                  value: true,
                },
                {
                  title: 'Direct import',
                  datakey: 'direct_import',
                  type: 'boolean',
                  value: true,
                },
              ]
            }
            type="checkbox"
            basePath={basePath}
            onChange={handleFilterChange}
            filtersData={allFilters}
            loginTipsVisible={!isLogin}
            defaultCollapse={true}
          />
          {c_basePath != 'promotion' && (
            <FilterSection
              title={'Special Offers'}
              data={
                isLogin && [
                  {
                    datakey: 'on_promotion',
                    title: 'Price Drop',
                    value: true,
                    type: 'boolean',
                  },
                ]
              }
              type="checkbox"
              basePath={basePath}
              onChange={handleFilterChange}
              filtersData={allFilters}
              loginTipsVisible={!isLogin}
              defaultCollapse={true}
            />
          )}
          <FilterSection
            title={'Stock level'}
            data={
              isLogin && [
                { datakey: 'in_stock', title: 'In Stock', value: true },
                { datakey: 'in_stock', title: 'Out of Stock', value: false },
                {
                  datakey: 'discontinued',
                  title: 'Discontinued',
                  value: true,
                  type: 'boolean',
                },
              ]
            }
            type="radio"
            basePath={basePath}
            onChange={handleFilterChange}
            filtersData={allFilters}
            loginTipsVisible={!isLogin}
            defaultCollapse={true}
          />
          <FilterSection
            title={'My SKU List'}
            data={
              isLogin && [
                {
                  datakey: 'on_my_sku_list',
                  title: 'Not on My SKU List',
                  value: false,
                  type: 'boolean',
                },
                {
                  datakey: 'on_my_sku_list',
                  title: 'Added to My SKU List',
                  value: true,
                  type: 'boolean',
                },
              ]
            }
            type="radio"
            basePath={basePath}
            onChange={handleFilterChange}
            filtersData={allFilters}
            loginTipsVisible={!isLogin}
            defaultCollapse={true}
          />
          {/* <FilterSection
        title={'Discontinued'}
        data={
          isLogin && [
            {
              datakey: 'discontinued',
              title: 'Discontinued',
              value: true,
              type: 'boolean',
            },
          ]
        }
        type="checkbox"
        basePath={basePath}
        onChange={handleFilterChange}
        filtersData={allFilters}
      /> */}
          <FilterPrice
            title={'Price'}
            datakey={'price'}
            data={isLogin && []}
            type="price"
            basePath={basePath}
            onChange={handleFilterChange}
            filtersData={allFilters}
            loginTipsVisible={!isLogin}
            defaultCollapse={true}
          />

          {/* {isLogin && <CompareList />} */}
        </div>
      </div>
    </div>
  );
};

export default FiltersMod;
